import React, { memo, useState, useEffect } from 'react';

import ChartWrapper from './ChartWrapper';
import SalaryChart from './SalaryChart';

import chartJson from '../chartJson.js';

const EditChartWrapper = memo(({ title, settingWrapper, organizationCode, chartConfig, ...otherProps }) => {
     const [chartParam, setChartParam] = useState({})
    const [chartData, setChartData] = useState([])
    const [loading] = useState(false)

    useEffect(() => {
        setChartParam(JSON.parse(JSON.stringify(chartConfig)))
    }, [chartConfig])

    useEffect(() => {
        const { globalType } = chartParam
        if (globalType) {
            setChartData(chartJson[globalType] || [])
        }
    }, [chartParam])

    return (
        <ChartWrapper title={title} settingWrapper={settingWrapper} {...otherProps}>
            <SalaryChart chartData={chartData} chartParam={chartParam} loading={loading}/>
        </ChartWrapper>
    )
})

export default EditChartWrapper
